<template>
  <el-dialog :title="formData.id?'编辑部门':'新增部门'" :visible="showDialog" @close="close">
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <!-- <el-input v-model="formData.managerId" placeholder="请选择负责人" /> -->
        <el-select v-model="formData.managerId" style="width:100%">
          <el-option
            v-for="item in managerList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" type="textarea" placeholder="1-100个字符" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { departmentList, userSimple, addDept, getDetail, updateDetail } from '@/api/department'
export default {
  props: {
    // 因为弹窗是通过父组件控制显示的，因此需要把这变量声明在props中
    showDialog: {
      type: Boolean,
      default: false
    },
    deptId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      formData: {
        name: '', // 部门名称
        code: '', // 编码
        managerId: '', // 负责人id
        introduce: '', // 介绍
        pid: null // 部门父级id
      },
      //   需求：完成部门编码和名称的校验 --
      //     ----- 是否和已存在的部门名称和编码重复
      //     1、添加自定义校验规则 --- validator属性
      //     2、在校验函数中 --- 获取已存在的部门列表数据 --- 调用接口获取
      //     3、利用some方法实现判断 -- 和校验
      //         some：判断数组中存在一个符合条件的数据则直接返回true
      //     否则返回false
      rules: {
        name: [{
          required: true, message: '请输入部门名称', trigger: 'blur'
        }, {
          min: 2, max: 10, message: '部门名称长度2-10位', trigger: 'blur'
        }, {
          validator: async(rule, value, callback) => {
            // 部门名称校验：不能和已存在的部门名字重名
            // value：当前新增的部门名称
            // 已存在的所有部门名称：调用接口获取
            const departList = await departmentList()
            let isRepeat = false // 保存名字是否重复的变量
            if (this.formData.id) {
              // 编辑
              const filterDept = departList.filter(item => item.id !== this.formData.id)
              console.log('排除自身之后的部门列表数据：', filterDept)
              isRepeat = filterDept.some(item => item.name === value)
            } else {
              // 新增
              isRepeat = departList.some(item => item.name === value)
            }
            if (isRepeat) {
              callback('部门中已存在该名称')
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        code: [{
          required: true, message: '请输入编码名称', trigger: 'blur'
        }, {
          min: 2, max: 10, message: '部门编码长度2-10位', trigger: 'blur'
        }, {
          validator: async(rule, value, callback) => {
            // 部门名称校验：不能和已存在的部门名字重名
            // value：当前新增的部门名称
            // 已存在的所有部门名称：调用接口获取
            const departList = await departmentList()
            let isRepeat = false
            if (this.formData.id) {
              // 编辑
              isRepeat = departList.filter(item => item.id !== this.formData.id)
                .some(item => item.code === value)
            } else {
              // 新增
              isRepeat = departList.some(item => item.code === value)
            }
            if (isRepeat) {
              callback('部门中已存在该编码')
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        managerId: [{
          required: true, message: '请输入部门负责人', trigger: 'blur'
        }],
        introduce: [{
          required: true, message: '请输入部门介绍', trigger: 'blur'
        }, {
          min: 2, max: 10, message: '部门名称长度1-100位', trigger: 'blur'
        }]
      },
      managerList: [
        {
          id: 1,
          lable: '黄金糕',
          value: '选项1'
        }
      ] // 负责人列表
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 获取部门负责人列表
    async getUserList() {
      this.managerList = await userSimple()
    },
    // 关闭弹窗
    close() {
      this.formData = {
        name: '', // 部门名称
        code: '', // 编码
        managerId: '', // 负责人id
        introduce: '', // 介绍
        pid: null // 部门父级id
      }
      this.$refs.form.resetFields()
      this.$emit('update:showDialog', false)
    },
    // 确定新增
    async submit() {
      //   console.log(this.formData) // 少了一个pid
      // 添加校验
      await this.$refs.form.validate()

      if (this.formData.id) {
        // 编辑
        await updateDetail(this.formData)
        this.$message.success('编辑成功')
      } else {
        //   调用新增接口
        this.formData.pid = this.deptId // 设置pid的值
        await addDept(this.formData)
        //   添加提示
        this.$message.success('添加成功')
      }
      //   关闭弹窗
      this.close()
      //  更新列表
      this.$emit('updateEvent')
    },
    // 或部门详情
    async getDeptDetails() {
      const res = await getDetail(this.deptId)
      // 实现回显
      this.formData = res
    }
  }
}
</script>
<style scoped>
</style>
